<!-- 主题设置界面 License By http://eleadmin.com -->
<template>
  <el-drawer title="登陆日志" :visible.sync="showSetting" size="400px" :append-to-body="true">
    <div class="ele-setting-wrapper">
      <el-timeline>
        <el-timeline-item
          v-for="(item,index) in lists"
          :key="'log' + index"
          :timestamp="item.create_time"
          placement="top"
          :color="item.status?'#67C23A':'#F56C6C'"
          class="item"
        >
          <h4>{{ item.type }}</h4>
          <p>{{ item.action }}</p>
        </el-timeline-item>
      </el-timeline>
      <el-divider />
      <el-alert
        type="warning"
        :closable="false"
        class="ele-alert-border"
        title="该前端模版基于eleadmin，仅供学习使用。若商用请取得官方授权。"
      />
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'EleSetting',
  data() {
    return {
      lists: []
    }
  },
  computed: {
    showSetting: {
      get() {
        return this.$store.state.theme.showSetting
      },
      set(val) {
        this.$store.dispatch('theme/set', { key: 'showSetting', value: val })
      }
    }
  },
  mounted() {
    this.getLoginLog()
  },
  methods: {
    /* 获取登陆日志 */
    getLoginLog() {
      this.$http.get('/log/loglist/').then(res => {
        this.lists = res.data.data
      })
    }
  }
}
</script>

<style lang="scss">
.ele-setting-wrapper {
  padding: 20px;

  .ele-setting-title {
    font-size: 13px;
    margin-bottom: 15px;
  }

  /* 主题风格 */
  .ele-setting-theme > div {
    width: 50px;
    height: 35px;
    border-radius: 3px;
    margin: 0 20px 30px 0;
    background-color: #F5F7FA;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    display: inline-block;
    vertical-align: top;
    position: relative;
    cursor: pointer;

    &.active:after {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #19be6b;
      position: absolute;
      left: 50%;
      bottom: -15px;
      margin-left: -3px;
    }

    &:before {
      content: "";
      width: 15px;
      height: 100%;
      background-color: #fff;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      display: inline-block;
      vertical-align: top;
    }

    &.ele-side-dark:before {
      background-color: #2E3549;
    }

    &.ele-head-light:before, &.ele-head-dark:before, &.ele-head-primary:before {
      width: 100%;
      height: 10px;
      background-color: #fff;
      border-bottom-left-radius: 0;
      border-top-right-radius: 3px;
    }

    &.ele-head-dark:before {
      background-color: #2E3549;
    }

    &.ele-head-primary:before {
      background-color: #409EFF;
    }

    &.ele-layout-mix {
      background-color: #2E3549;

      &:before {
        background-color: #f0f2f5;
        width: 35px;
        height: 25px;
        position: absolute;
        bottom: 0;
        right: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 3px;
      }
    }
  }

  /* 主题色选择 */
  .ele-setting-colors {
    margin-bottom: 20px;
  }

  .ele-setting-color-item {
    width: 20px;
    height: 20px;
    margin: 8px 8px 0 0;
    border-radius: 2px;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    vertical-align: top;
    position: relative;
    cursor: pointer;

    &.active:after {
      content: "\e6da";
      font-family: element-icons !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -7px 0 0 -7px;
      font-size: 14px;
      color: #FFF;
    }
  }

  /* 主题配置项 */
  .ele-setting-item {
    display: flex;
    margin-bottom: 20px;
    line-height: 28px;

    .setting-item-title {
      flex: 1;
    }

    .setting-item-control {
      max-width: 80px;
    }
  }

  .el-divider {
    margin-bottom: 20px;
  }
}
.item{
  height: 100px;
}
</style>
